<template>
  <div
    ref="refChart"
    style="width: 100%;height: 170px"
  ></div>
</template>

<script lang="ts" setup>
import {onUnmounted, onMounted, ref} from 'vue';
import * as echarts from 'echarts';
import {RequestBalanceData} from "@/api/path/index.js";

type EChartsOption = echarts.EChartsOption;
const refChart = ref();
const chartInstance = ref();
const chartData = ref<{value:number,name:string}[]>([])
// 获取接口数据
const getData= ()=>{
  return new Promise((resolve, reject)=>{
    RequestBalanceData().then((res:any)=>{
      const {balance,totalRechargeAmount}=res.resultObj;
      chartData.value=[{value:balance,name:'充值余额剩余'},{value:totalRechargeAmount,name:'充值金额'}]
      resolve(res.resultObj)
    })
      .catch((err:any)=>{
        reject(err)
      })
  })

}
onMounted(async ()=>{
 await getData()
  // 图表初始化
  initChart();
  // 调用Echarts图表自适应方法
  screenAdapter();
  // Echarts图表自适应
  window.addEventListener("resize", screenAdapter);
})

const initChart=()=>{
  chartInstance.value = echarts.init(refChart.value);
  const initOption:EChartsOption = {
    title: {
            text: `平台充值余额${chartData.value[0].value}元`,
            left: "center",
            bottom: "0",
            textStyle: {
              fontSize: 12,
              color: "#464646",
            },
          },
    tooltip: {
      trigger: 'item'
    },
    color: ['#017efa', '#b1cbfe', '#51cbff', '#b6e9ff'],
    series: [

      {
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,

        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: chartData.value
      }
    ]
  }
  // 图表初始化配置
  chartInstance.value?.setOption(initOption);
}
const screenAdapter=()=>{
  // 手动的调用图表对象的resize 才能产生效果
  chartInstance.value.resize({width:'auto',animation: { duration: 300 } });
}
onUnmounted(() => {
  // 销毁Echarts图表
  chartInstance.value.dispose();
  chartInstance.value = null;
  // Echarts图表自适应销毁
  window.removeEventListener("resize", screenAdapter);
});
// export default defineComponent({
//   setup() {
//    const chartInstance = ref();
//     const chartContainer2 = ref<HTMLElement | null>(null);
//     // let chartInstance: echarts.ECharts | null = null;
//     const initChart = () => {
//       if (chartContainer2.value) {
//         chartInstance.value = echarts.init(chartContainer2.value);
//         // 设置ECharts选项
//         chartInstance.value.setOption({
//           title: {
//             text: "平台充值余额0元",
//             left: "center",
//             bottom: "0.375rem",
//             textStyle: {
//               fontSize: 12,
//               color: "#464646",
//             },
//           },
//           // tooltip: {
//           //     trigger: 'item'
//           // },
//           color: ["#017efa", "#b1cbfe", "#51cbff", "#b6e9ff"],
//           series: [
//             {
//               type: "pie",
//               radius: ["40%", "60%"],
//               avoidLabelOverlap: false,
//               label: {
//                 show: false,
//                 position: "center",
//               },
//               // label: {
//               //     normal: {
//               //         // formatter: '{b}:{d}%',
//               //         // position: 'center'
//               //     },
//               // },
//               data: [
//                 { value: 1048, name: "充值余额剩余" },
//                 { value: 735, name: "充值金额" },
//               ],
//             },
//           ],
//         });
//       }
//     };
//     /** 图表自适应 */
//     const screenAdapter = () => {
//       const adapterOption = {
//         title: {
//           textStyle: {
//             fontSize: 16
//           }
//         },
//         // 圆点分类标题
//         legend: {
//           textStyle: {
//             fontSize: 12
//           }
//         },
//         xAxis: {
//           //  改变x轴字体颜色和大小
//           axisLabel: {
//             fontSize: 12
//           }
//         },
//         yAxis: {
//           //  改变y轴字体颜色和大小
//           axisLabel: {
//             fontSize: 12
//           }
//         }
//       };
//       // 图表自适应变化配置
//       chartInstance.value?.setOption(adapterOption);
//       // 手动的调用图表对象的resize 才能产生效果
//       chartInstance.value.resize();
//     };
//     // const resizeChart = () => {
//     //   if (chartInstance) {
//     //     chartInstance.resize();
//     //   }
//     // };
//
//     onMounted(() => {
//       initChart();
//       window.addEventListener("resize", screenAdapter);
//     });
//     //
//     // watch(chartContainer2, () => {
//     //   if (chartInstance) {
//     //     chartInstance.dispose(); // 销毁旧的实例
//     //   }
//     //   initChart();
//     // });
//     return {
//       chartContainer2,
//     };
//   },
// });
</script>


